<template>
	<view class="tab-container">
		<view class="tab-box">
			<scroll-view scroll-x class="scroll-view" scroll-with-animation
			:scroll-left="scrollLeft">
				<view class="scroll-content">
					<view class="tab-item-box">
						<block v-for="(item,index) in tabData" :key="index">
							<view :id="'_tab_'+index" class="tab-item" :class="{'tab-item-active':activeIndex === index}" @click="onTabClick(index)" 
							:style="{ color: activeIndex === index ? defaultConfig.activeTextColor : defaultConfig.textColor }"
							>
								{{item.v}}
							</view>
						</block>
						
					</view>
					<!-- 滑块 -->
					<view class="underLine" :style="{
						transform:'translateX('+slider.left+'px)',
						width:defaultConfig.underLineWidth+'px',
						height:defaultConfig.underLineHeight+'px',
						backgroundColor:defaultConfig.underLineColor,
						}"></view>
				</view>
			</scroll-view>
			</view>
		</view>
</template>

<script>
	export default {
		name:"tabbar",
		props:{
			config:{
				type:Object,
				default:()=>{
					return {};
				}
			},
			tabData:{
				type:Array,
				default:()=>{
					return [];
				}
			},
			defaultIndex:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				//内部维护的数据对象，为每个item单独维护一个slider的滑块对象
				tabList:[],
				activeIndex:-1,
				slider:{
					left:0
				},
				//scrollView的横向滚动条位置
				scrollLeft:0,
				defaultConfig:{
					textColor:'#333333',
					activeTextColor:'#f94d2a',
					underLineWidth:24,
					underLineHeight:2,
					underLineColor:'#f94d2a'
				}
			};
		},
		watch:{
			config:{
				handler(val){
					this.defaultConfig={ ...this.defaultConfig, ...val };
				},
				immediate:true
			},
				//监听tabData的变化
			tabData:{
				//当tabData发生变化时，回调的方法
				handler(val){console.log(val);
					this.tabList=val;
					setTimeout(()=>{
						//计算item的 slider
						this.updateTabWidth();
					},0);
				},
				immediate:true
			},
			defaultIndex:{
				//defaultIndex发生变化时，回调
				handler(val){
					//
					this.activeIndex=val;
				},
				//当前的handler回调将会在侦听开始之后立即被调用
				immediate:true
			}
		},
		
		methods:{
			//更新tab的宽度
			updateTabWidth(){
				let data=this.tabList;
				if(data.length===0)return;
				//获取dom的固定写法
				const query=uni.createSelectorQuery().in(this);
				data.forEach((item,index)=>{
					//获取dom
					query
					.select('#_tab_'+index)
					.boundingClientRect((res)=>{
						//res就是这里拿到dom
						
						item._slider={
							left:res.left+(res.width-this.defaultConfig.underLineWidth)/2
						};
						if(data.length-1===index){
							this.tabToIndex();
						}
					})
					.exec();
				});
				
			},
			onTabClick(index){
				this.activeIndex=index;
				//发送一个通知，通知表示激活项发生变化了
				this.tabToIndex();
				this.$emit('tabClick',index);
			},
			/* 计算滑块的滚动位置 */
			tabToIndex(){
				//获取当前的activeIndex
				const index=this.activeIndex;
				//计算滑动的滚动
				//配置滚动条的left
				this.slider={
					//tabitem的宽度tabitem的left、slider的width
					//left=tabItem.left+(tabItem.width-slider.width)/2
					left:this.tabList[index]._slider.left
				};
				//控制scrollview进行烘箱
				this.scrollLeft=this.activeIndex * this.defaultConfig.underLineWidth;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-container{
		font-size:14px;
		height:45px;
		line-height:45px;
		background-color: $uni-bg-color;
		.tab-box{
			width:100%;
			height: 45px;
			display: flex;
			position:relative;
			.scroll-view{
				white-space: nowrap;
				width:100%;
				height:100%;
				box-sizing:border-box;
				.scroll-content{
					width: 100%;
					height:100%;
					position:relative;
					.tab-item-box{
						height:100%;
						.tab-item{
							height:100%;
							display:inline-block;
							text-align:center;
							padding:0 15px;
							position:relative;
							color:$uni-text-color-placeholder;
							&-active{
								color:$uni-text-color-hot;
								border-bottom:1px solid red;
							}
						}
					}
				.underLine{
					height:2px;
					width: 24px;
					background-color: $uni-text-color-hot;
					border-radius:3px;
					transition:.5s;
					position: absolute;
					bottom:0;
					
				}
				}
			}
		}
	}
.tab-box text{
	padding:8px;
}

</style>